<template>
  <div class="recharge-detail-page" :class="{ animate: showAnimation }">
    <TopNavBar :title="_t18('recharge_detail')" type="back" />

    <div class="detail-container">
      <div class="info-card">
        <div class="row">
          <span class="label">{{ _t18('recharge_coin') }}</span>
          <span class="value">{{ props.data.type }}</span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('recharge_amount') }}</span>
          <span class="value">{{ props.data.amount }} USD</span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('recharge_status') }}</span>
          <span
            class="value"
            :class="{
              success: props.data.status == 1,
              pending: props.data.status == 0,
              fail: props.data.status == 2
            }"
          >
            {{
              props.data.status == 0
                ? _t18('recharge_waiting')
                : props.data.status == 1
                ? _t18('recharge_tab_success')
                : _t18('recharge_tab_error')
            }}
          </span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('recharge_time') }}</span>
          <span class="value">{{ formatTo12Hour(props.data.createTime) }}</span>
        </div>

        <div class="row">
          <span class="label">{{ _t18('orderCode') }}</span>
          <Copy :data="`${props.data.serialId}`">
            <template #copyMsg>
              <span class="value">{{ props.data.serialId }}</span>
            </template>
          </Copy>
        </div>

        <div class="row">
          <span class="label">{{ _t18('recharge_address') }}</span>
          <Copy :data="`${props.data.address}`">
            <template #copyMsg>
              <span class="value address">{{ props.data.address }}</span>
            </template>
          </Copy>
        </div>

        <!-- 充值进度条 -->
        <div class="progress-container">
          <div class="progress-steps">
            <div
              v-for="(step, index) in steps"
              :key="index"
              class="step"
              :class="{
                active: index < currentStep,
                current: index === currentStep - 1
              }"
            >
              <div class="circle">{{ index + 1 }}</div>
              <div class="label">{{ step }}</div>

              <div
                v-if="index < steps.length - 1"
                class="connector"
                :class="{ active: index < currentStep - 1 }"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { _t18 } from '@/utils/public'
import Copy from '@/components/common/Copy/index.vue'

// 格式化时间
function formatTo12Hour(timeStr) {
  if (!timeStr) return '-'
  const match = timeStr.match(/^(\d{4})-(\d{2})-(\d{2})[ T](\d{1,2}):(\d{2})(?::(\d{2}))?/)
  if (!match) return timeStr
  const [, y, m, d, h, min, s = '00'] = match
  const hour = parseInt(h, 10)
  const ampm = hour >= 12 ? 'PM' : 'AM'
  const displayHour = hour % 12 === 0 ? 12 : hour % 12
  return `${y}-${m}-${d} ${displayHour}:${min}:${s} ${ampm}`
}

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

const showAnimation = ref(false)

// 步骤文字
const steps = [_t18('23_submit'), _t18('15_pending'), _t18('15_success')]

// 当前步骤计算逻辑
const currentStep = computed(() => {
  const status = Number(props.data.status)
  if (status === 0) return 2 // 审核中：到第2步（处理中）
  if (status === 1) return 3 // 成功：完成第3步
  if (status === 2) return 1 // 失败：只到提交
  return 0
})

onMounted(() => {
  setTimeout(() => (showAnimation.value = true), 40)
})
</script>

<style scoped>
.recharge-detail-page {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
  font-family: 'Helvetica Neue', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-weight: 300;
  position: relative;
}

.detail-container {
  padding: 16px;
}

.info-card {
  background: #fff;
  border-radius: 12px;
  padding: 10px 0;
  margin: 20px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  font-weight: 300;
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #f0f0f0;
}
.row:last-child {
  border-bottom: none;
}

.label {
  color: #999;
  font-size: 15px;
  font-weight: 300;
}

.value {
  color: #111;
  font-size: 15px;
  font-weight: 300;
  text-align: right;
  word-break: break-all;
}

.address {
  color: #000;
}

.value.success {
  color: #00c693;
}

.value.pending {
  color: #ffaa00;
}

.value.fail {
  color: #fa190c;
}

/* ==================== 充值进度条 ==================== */
.progress-container {
  background: #fff;
  border-radius: 12px;
  padding: 24px 16px;
  margin-top: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  display: flex;
  justify-content: center;
}

.progress-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.circle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e0e0e0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  z-index: 1;
}

/* 激活圆点 */
.step.active .circle,
.step.current .circle {
  background: #000;
}

/* 默认文字 */
.step .label {
  margin-top: 8px;
  font-size: 13px;
  color: #888;
  text-align: center;
}

/* 激活和当前步骤的文字为黑色 */
.step.active .label,
.step.current .label {
  color: #000 !important;
  font-weight: 600;
}

/* 未激活的保持灰色 */
.step:not(.active):not(.current) .label {
  color: #dcdcdc;
}

/* 连接线 */
.connector {
  position: absolute;
  top: 14px;
  left: 100%;
  width: calc(100% - 0px);
  height: 3px;
  background: #dcdcdc;
  border-radius: 2px;
  transform: translateX(-50%);
}

.connector.active {
  background: #000;
}
</style>
